<template>
 <div class="box">
   <div class="innerBox">
     <div class="front">
       <div class="top">
         <img src="../../assets/images/写在前面.png" width="250px" height="100px"/>
       </div>
       <el-divider border-style="double"></el-divider>
       <div class="bottom">
         现在很多人对汉服的印象，<br>
         还停留在宽袍大袖的阶段，<br>
         甚至有很多人把很多古装戏服也看做是汉服。<br>
         汉服，是汉民族的传统服饰，皆是日常生活所穿，等同于现代人所穿的服装。<br>
         一般来讲，汉服需袖长过指尖，裙长（衣长）过脚踝，以微露鞋面不拖地为宜。尺寸以宽大合身为宜，不宜过于收束局促。汉服剪裁需有前后中缝，一般也要求有接袖。<br>
         本文就现代汉服复兴下的形制进行分类总结，让各位喜欢汉服的同袍们看看现今汉服展现的千古风流。喜欢的朋友不妨仔细阅读。<br>
       </div>
     </div>
     <div class="all">
       <div class="top">
         <img src="../../assets/images/中性汉服.png" width="250px" height="100px"/>
       </div>
       <el-divider border-style="double"></el-divider>
       <div class="bottom">
         <div class="inner" v-for="item in typeData" :key="item.hanfuTypeId">
           <template v-if="item.hanfuTypeGender === '全'">
             <h1>{{ item.hanfuTypeName }}</h1><br>
             <div v-for="(segment,index) in item.hanfuTypeDescribe.split('-')" :key="index">●{{ segment }}</div>
             <div class="innerBottom">
               <img :src="'http://localhost:8080/api/file/' + item.hanfuTypeImage" width="350px" height="500px"/>
             </div>
           </template>
         </div>
       </div>
     </div>
     <div class="girl">
       <div class="top">
         <img src="../../assets/images/女士汉服.png" width="250px" height="100px"/>
       </div>
       <el-divider border-style="double"></el-divider>
       <div class="bottom">
         <div class="inner" v-for="item in typeData" :key="item.hanfuTypeId">
          <template v-if="item.hanfuTypeGender === '女'">
            <h1>{{ item.hanfuTypeName }}</h1><br>
            <div v-for="(segment,index) in item.hanfuTypeDescribe.split('-')" :key="index">●{{ segment }}</div>
            <div class="innerBottom">
              <img :src="'http://localhost:8080/api/file/' + item.hanfuTypeImage" width="350px" height="500px"/>
            </div>
          </template>
         </div>
       </div>
     </div>
     <div class="boy">
       <div class="top">
         <img src="../../assets/images/男士汉服.png" width="250px" height="100px"/>
       </div>
       <el-divider border-style="double"></el-divider>
       <div class="bottom">
         <div class="inner" v-for="item in typeData" :key="item.hanfuTypeId">
           <template v-if="item.hanfuTypeGender === '男'">
             <h1>{{ item.hanfuTypeName }}</h1><br>
             <div v-for="(segment,index) in item.hanfuTypeDescribe.split('-')" :key="index">●{{ segment }}</div>
             <div class="innerBottom">
               <img :src="'http://localhost:8080/api/file/' + item.hanfuTypeImage" width="350px" height="500px"/>
             </div>
           </template>
         </div>
       </div>
     </div>
      <div class="bottombottom">
        附：【现代汉服形制简易版】<br>
        【上衣下裳制】：男-★冕服★(男子最高礼服)，衣裳，玄端，明制祭服。女-襦裙(齐胸，齐腰，对襟等)(按款式分)。女-襦裙(衫裙(单襦)，袄裙(复襦))(按上装分)。<br>
        【衣裳连制】：男女-直裾袍(直襟分裁袍)。男-深衣(郑玄深衣，孔颖达深衣，温公深衣、朱子深衣，黄宗羲深衣等)，襕衫，曳撒袍，贴里袍。女-★翟衣★(女子最高礼服)，曲裾袍(绕襟袍)。<br>
        【通裁制】：男女-圆领袍衫(唐，宋，明风)。男-道袍，直身，直裰，褡护。<br>
        【衣裤制】：男女-衣裤类（现通称“裋褐”）(裤分为：袴(无裆)，裈(有裆))。<br>
        【首服】：男-冕。男女-冠弁类 。男-巾帻幞类。女-发髻头饰<br>
        【罩衫】：男女-披风(明风)，褙子(宋风)，半臂衫。男-大氅。女-大衫，斗篷(存疑)。<br>
        【配饰】：男女-腰带(革带)，玉佩，首饰，蔽膝，绶带，扇，符等。男-佩剑，配刀。女-披帛，霞帔。<br>
        【亵衣】：即内衣。抱腹，心衣，裲裆，诃子，抹肚，抹胸，襕裙，主腰等<br>
        【中衣】：男女-中衣，中裤，中单。女-中裙。<br>
        【足衣】：鞋(屐，屦，履)，靴，袜等。<br>
      </div>
   </div>
   <el-backtop style="--el-backtop-hover-bg-color: rgb(245,108,108);--el-backtop-text-color: red" :right="100" :bottom="100" />
 </div>
</template>

<script setup>
import {userApi} from "../../api/app";
import {onMounted, ref} from "vue";

const typeData = ref();

onMounted(() => {
  getData();
})

const getData = () => {
  userApi.getAllType().then(response => {
    typeData.value = response;
  })
}
</script>

<style scoped>
.box {
  padding: 0 200px;
}
.innerBox {
  background-color: #FFFFFF;
  padding: 20px;
}
.front {
  padding-top: 20px;
}
.top {
  display: flex;
  justify-content: center;
}
.bottom {
  padding: 20px;
}
.girl,.boy,.all,.bottombottom {
  margin-top: 40px;
}
.boy {
  margin-top: 40px;
}
.inner {
  margin-bottom: 50px;
}
.innerBottom {
  display: flex;
  justify-content: center;
}
.bottombottom {
  padding: 50px;
  color: gray;
}
</style>